<template>
	
	<div class="login-register">
		<!-- <el-button style="position: fixed;" @click="addpath">添加</el-button> -->
		<div class="contain">
			<div class="big-box" :class="{active:isLogin}">
				<div class="big-contain" key="bigContainLogin" v-if="isLogin" style="background-image: url(src/assets/picture/bj5.jpg);background-size: 100vw 100vh;background-position: 80vw 80vh;">
					<el-form 
					:model="loginForm" 
					label-width="auto" 
					class="login" 
					ref="loginFormRef"
					:rules="loginRules"
					>
					<div class="btitle">用户登录</div>
						<el-form-item style="width: 40%;" prop="account" label-width="0">
						<el-input v-model.trim="loginForm.account"  placeholder="请输入账号" :prefix-icon="User"/>
						</el-form-item>
						<el-form-item style="width: 40%;" prop="password" label-width="0">
						<el-input v-model.trim="loginForm.password" placeholder="请输入密码" :prefix-icon="Lock"/>
						</el-form-item>
						<el-form-item style="width: 40%;" prop="captcha" label-width="0">
						<el-input v-model.trim="loginForm.captcha" placeholder="验证码" @keyup.enter="login(loginFormRef)" style="width: 50%;"/>
						<img :src="captcha" style="width: calc(50% - 4px);height: 32px;margin-left: 4px;border-radius: 4px;cursor: pointer;" @click="getCaptcha()">
						</el-form-item>
						<el-form-item style="width: 40%;">
						<el-radio-group v-model.number="loginForm.state">
							<el-radio :value=1>用户</el-radio>
							<el-radio :value=0>管理员</el-radio>
						</el-radio-group>
						</el-form-item>
				
						<el-button type="primary" @click="login(loginFormRef)"   class="menu">登录</el-button>

					</el-form>
				</div>

				<div class="big-contain" key="bigContainRegister" v-else style="background-image: url(src/assets/picture/bj4.jpeg);background-size: 100vw 100vh;background-position: 53vw 80vh;">

          <el-form 
					:model="registForm" 
					label-width="auto" 
					class="regist"
					ref="registFormRef"
					:rules="registRules"
					>
						<div class="retitle">注册</div>
            <el-form-item style="width: 40%;" prop="account">
              <el-input v-model.number="registForm.account" placeholder="请输入账号" :prefix-icon="User" style="" type="account"/>
            </el-form-item>
            <el-form-item style="width: 40%;" prop="name">
              <el-input v-model="registForm.name" placeholder="请输入姓名" :prefix-icon="User" type="name" />
            </el-form-item>
            <el-form-item style="width: 40%;" prop="phone">
              <el-input v-model="registForm.phone" placeholder="请输入手机号" :prefix-icon="Iphone" type="phone"/>
            </el-form-item>
            <el-form-item style="width: 40%;" prop="password">
              <el-input v-model="registForm.password" placeholder="请输入密码" :prefix-icon="Lock" type="password" />
			</el-form-item>
			<el-form-item style="width: 40%;" prop="checkPassword">
				<el-input v-model="registForm.checkPassword" placeholder="请再次输入密码" :prefix-icon="Lock" type="password" />
            </el-form-item>
            <el-form-item prop="state">
              <el-radio-group v-model="registForm.state">
                <el-radio :value=1>用户</el-radio>
                <el-radio :value=0>管理员</el-radio>
              </el-radio-group>
            </el-form-item>
              <el-button type="primary" @click="regist(registFormRef)" class="menu">注册</el-button>
          </el-form>
				</div>
			</div>
			<div class="small-box" :class="{active:isLogin}">
				<div class="small-contain" key="smallContainRegister" v-if="isLogin" style="background-image: url(src/assets/picture/bj1.jpg);background-size: 100vw 100vh;background-position: 50vw 80vh;">
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">请登录你的账户</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<div class="small-contain" key="smallContainLogin" v-else style="background-image: url(src/assets/picture/bj4.jpeg);background-size: 100vw 100vh;background-position: 80vw 80vh;">
					<div class="stitle">
            <span>欢迎使用</span>
            <span>屌炸天
              <span style="color: gold;">万能</span>
              模板</span>
          </div>
					<p class="scontent">开始注册</p>
					<button class="sbutton " @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>  
	import { reactive, ref } from 'vue'  
  	import type { FormInstance, FormRules,ElInput,ElForm,ElRadio,ElButton } from 'element-plus'
  	import {User,Lock,Iphone} from '@element-plus/icons-vue'
  	import { loginAPI, registAPI,getCaptchaAPI} from '../../api/login'
  	import { ElMessage } from 'element-plus'
  	import {useRouter,useRoute} from 'vue-router'
	import {useTokenStore} from '../../utils/token.js'
	import useCounter from '../../stores/pinia'
	const counterStore=useCounter()
  	const router=useRouter()
  	const {query,params}=useRoute()
	const tokenStore = useTokenStore()
  	const isLogin = ref(true);
	const captcha=ref()
	const inputCaptcha=ref('')
 //定义登录注册的数据模型  
const loginForm=reactive({
  account:'',
  password:'',
  state:1,
  captcha:inputCaptcha.value
})
const registForm=reactive({
  account:'',
  name:'',
  state:1,
  phone:'',
	createTime:'',
	sex:1,
	imageUrl:"https://i1.hdslb.com/bfs/archive/bd8d43ae760da753b89bfe9d9dcee69600fd4595.jpg",
  password:'',
  checkPassword:''
})

const changeType = () => {
  isLogin.value = !isLogin.value;
  loginForm.account='';
  loginForm.password='';
  loginForm.state=1;

  registForm.account='',
  registForm.name='',
  registForm.state=1,
  registForm.phone='',
	registForm.createTime='',
	registForm.sex=1,
	registForm.imageUrl="https://i1.hdslb.com/bfs/archive/bd8d43ae760da753b89bfe9d9dcee69600fd4595.jpg",
  registForm.password='',
  registForm.checkPassword=''
};
  //调用后台接口完成登录) 

const loginPassword=ref()
const login = async(formEl:FormInstance|undefined) => {
		loginPassword.value=''
      //登录
			if(!formEl){
				return
			}
			formEl.validate(async(valid)=>{
				if(valid){
					const result=await loginAPI(loginForm)
					if(result.data.code==200){
						tokenStore.setToken(result.data.data)
						counterStore.jwt=result.data.data
						// console.log("token"+result.data.data)
						ElMessage.success("登录成功")
						router.push({
							path:'/home',
						})
					}else{
							loginPassword.value=result.data.msg
							formEl.validate((valid)=>{})//再次调用验证
					}
				}
			})
				


}
const getCaptcha=async()=>{
	const result =await getCaptchaAPI()
	captcha.value=result.data.data
}
// 登录校验
const loginFormRef=ref<FormInstance>()
const validateLoginAccount=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入账号'))
	}else if(!/^\d+$/.test(value)){
		callback(new Error('请输入纯数字账号'))
	}else if(loginPassword.value=='账号或密码错误'){
		callback(new Error('账号或密码错误'))
	}else{
		// loginPassword.value=''
		callback()
	}
}
const validateLoginPass=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入密码'))
	}else if(loginPassword.value=='账号或密码错误'){
		callback(new Error('账号或密码错误'))
	}else{
		// loginPassword.value=''
		callback()
	}
}
const validateLoginCaptcha=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入验证码'))
	}else if(loginPassword.value=='验证码错误'){
		callback(new Error('验证码错误'))
	}else{
		// loginPassword.value=''
		// console.log("cdcececece就看你保护"+value+"iiii")
		callback()
	}
}

const loginRules=reactive<FormRules<typeof loginForm>>({
	account:[{validator:validateLoginAccount,trigger:'blur'}],
	password:[{validator:validateLoginPass,trigger:'blur'}],
	captcha:[{validator:validateLoginCaptcha,trigger:'blur'}],
})

// 获取当前时间
const currentTime=()=>{
  var date=new Date();
  var year=date.getFullYear();
  let month=date.getMonth();
  var dateArr=[
    date.getMonth()+1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  ];
  // 设置MM,SS
  for(var i=0;i<dateArr.length;i++){
    if(dateArr[i]>=1&&dateArr[i]<=9){
      dateArr[i] ="0"+dateArr[i];
    }
  }
  var strDate=year +"-"+dateArr[0]+"-"+dateArr[1]+" "+dateArr[2]+":"+dateArr[3]+":"+dateArr[4];
  registForm.createTime=strDate
}
const registAccount=ref()
const regist=async(formEl:FormInstance|undefined)=>{
	registAccount.value=''
	if(!formEl){
		return
	}
	formEl.validate(async(valid)=>{
		if(valid){
			currentTime()
			const result=await registAPI(registForm)
			if(result.data.code==200){
				ElMessage.success("注册成功，请返回登录")
				isLogin.value = !isLogin.value;
			}else{
				registAccount.value=result.data.msg
				formEl.validate()
			}
		}
	})

  } 
//注册校验
const registFormRef=ref<FormInstance>()
const validateRegistAccount=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入账号'))
	}else if(!/^\d+$/.test(value)){
		callback(new Error('请输入纯数字账号'))
	}else if(registAccount.value==='该账号已存在，请换一个'){
		callback(new Error(registAccount.value))
	}else{
		callback()
	}
}
const validateRegistName=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入姓名'))
	}else{
		callback()
	}
}
const validateRegistPhone=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入手机号'))
	}else{
		callback()
	}
}
const validateRegistPass=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请输入密码'))
	}else{
		callback()
	}
}
const validateRegistCheckPass=(rule:any,value:any,callback:any)=>{
	if(value===''){
		callback(new Error('请再次输入密码'))
	}else if(value!=registForm.password){
		callback(new Error('两次密码输入不一致'))
	}else{
		callback()
	}
}

const registRules=reactive<FormRules<typeof registForm>>({
	account:[{validator:validateRegistAccount,trigger:'blur'}],
	name:[{validator:validateRegistName,trigger:'blur'}],
	phone:[{validator:validateRegistPhone,trigger:'blur'}],
	password:[{validator:validateRegistPass,trigger:'blur'}],
	checkPassword:[{validator:validateRegistCheckPass,trigger:'blur'}]
})


import {addPojoClassAPI,pageCountAPI} from '../../api/page.js'
import { onMounted} from 'vue';
const routerTitles=ref([])

const addpath=async()=>{
	  const result =await addPojoClassAPI({name:'home'})
  console.log(result.data.data)

}

onMounted(()=>{
	getCaptcha()
})
</script>
<style scoped>
.yellow-triangle {
  width: 80px;
  height: 80px;
  /* border-style: solid; */
  /* border-width: 100px 0 0 100px; */
	/* background-color: #01c0ff; */
  /* border-color: yellow transparent transparent transparent; */
  position: absolute;
  top: 0;
  right: 38px;
	img{
		border-top-right-radius: 10px;
		cursor: pointer;
	}
  /* z-index: 2; */
  /* border-top-right-radius: 20px; */
}

	.login-register{
    	position: absolute;
		width: 100%;
		/* height: 100%; */
		height: 100%;
    /* background: linear-gradient(to bottom right, rgb(255, 123, 0), rgb(221, 178, 86), rgb(238, 255, 0), rgb(0, 251, 255), rgb(0, 119, 255)); */
	background-repeat: no-repeat;
		background-image: url(@/assets/picture/bj1.jpg);
		background-size: 100vw 100vh;
  		background-position: center;
	}
.contain {
  width: 60%;
  height: 60%;
  min-width: 760px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* overflow: hidden; */
  border-radius: 20px;
  /* background-color: rgba(255, 255, 255, 0.438); */
}

.contain::after {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% + 38px);
  height: calc(100% - 0.7px);
  /* background-color: #fff; */
    box-shadow: -28px 28px 25px rgba(0, 0, 0, 0.801);
  pointer-events: none;
  border-radius: 20px;
}
	.big-box{
		width: 55%;
		/* min-width: 350px; */
		height: 100%;
		position: absolute;
		top: 0;
		left: 45%;
		transition: all 1s;
	}
	.big-contain{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  border-radius: 20px;
    /* box-shadow: -18px 18px 18px rgba(0, 0, 0, 0.801); */
	}
	.btitle{
		font-size: 1.5em;
		font-weight: bold;
		color: #f8f8f8;
    text-align: center;
		padding-bottom: 10%;
		/* background-color: yellowgreen; */

	}
  .login{
		height: 100%;
    width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		float: left;
		/* box-shadow: -108px 108px 108px rgba(228, 0, 0, 0.801); */
  }
  .regist{
    height: 100%;
    width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		float: left;
  }

  .retitle{
		font-size: 1.5em;
		font-weight: bold;
		color: #ffffff;
		padding-bottom: 2%;
  }
	.bform{
		width: 100%;
		height: 40%;
		padding: 2em 0;
	}
	.bform .errTips{
		display: block;
		width: 50%;
		text-align: left;
		color: red;
		font-size: 0.7em;
		margin-left: 1em;
	}
	.bform input{
		width: 50%;
		height: 30px;
		border: none;
		outline: none;
		border-radius: 10px;
		padding-left: 2em;
		background-color: #f0f0f0;
	}
	.bbutton{
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		background-color: #7babe9;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}
	.small-box{
		width: 50%;
		/* min-width: 350px; */
		height: 100%;
		
		
		/* background: linear-gradient(to top left,#b8e3f1,#01c0ff,#34c5f5,#b8e3f1); */
		position: absolute;
		top: 0;
		left: 0;
		transition: all 1s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}
	.small-contain{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    min-width: 200px;
  border-radius: 20px;
	}
	.stitle{
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
    display: flex;
    flex-direction:column;
    align-items: center;
	}
	.scontent{
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 2em 4em;
		line-height: 1.7em;
	}
	.sbutton{
		width: 60%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: rgba(61, 60, 60, 0.699);
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
		border-style: none;
	}
	.sbutton:hover{
		background-color: #cccccc80;
		/* border: 1px solid #193c69; */
		color: #3b3b3b;
		font-size: larger;
		font-weight: 700;
	}
	
	.big-box.active{
		left:0;
		transition: all 1s;
		/* background-color: yellowgreen; */
	}
	.small-box.active{
		left: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		/* inherit 是一个 CSS 关键字，它表示该属性应该继承其父元素的计算值。 */
		border-top-right-radius: inherit;
		border-bottom-right-radius: inherit;
		transform: translateX(-100%);
		transition: all 1s;
	}

	.menu{
		background-color: rgba(61, 60, 60, 0.795);
      width: 150px;
	  border-radius: 24px;
      outline: 0;
      box-shadow: none;
      border: 0;
	  font-weight: 400;
	  font-size: 0.9em;
      border-style: none;
    }

    .menu:hover{
		background-color: #cccccc80;
      box-shadow: none;
	  color: #3b3b3b;
      border: 0;
      font-size: medium;
	  font-weight: 700;
    }

		:deep(.el-radio){
			--el-radio-text-color:rgb(0, 255, 13);
		}
</style>